<template>
  <div class="content mobile-mem bg-white">
    <dc-header :page-to="'/invite'" :title="'手机号邀请成员'"></dc-header>
    <div class="pl50 pr50 pt">
      <inputItem placeholder="请输入邀请人姓名" type="text"
                 iconName="icon-register-account"
                 v-model="fullname"
                 :maxLength = "15"
                 v-validate="{ rules: { required: true } }"
                 name="姓名"
      />
      <inputItem class="mt30" placeholder="请输入邀请人手机号" type="text"
                 iconName="icon-login-account"
                 v-model="mobinum"
                 :maxLength = "11"
                 v-validate="{ rules: { required: true, phone: true } }"
                 name="手机号"
      />
    </div>
    <div class="pl50 pr50 mt50">
      <mt-button @click="sendrequest" size="large" type="primary"
                 :disabled="(!fullname || !mobinum) && errors.items.length==0 || errors.items.length!=0">发送邀请
      </mt-button>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import inputItem from '@/common/plugins/input/inputItem';
  import mintUi from '../../common/mintUi';
  import api from '../../common/api/member';

  export default {
    data () {
      return {
        mobinum: '',
        fullname: ''
      };
    },
    components: {
      'dc-header': header,
      'inputItem': inputItem
    },
    methods: {
      sendrequest () {
        let self = this;
        this.$validator.validateAll().then((result) => {
          if (result) {
            api.memInvite({
              'roleName': self.$route.query.roleName,
              'roleId': self.$route.query.roleId,
              'mobile': self.mobinum,
              'fullName': self.fullname,
              'merchantCode': self.$route.query.merchantCode,
              'userName': self.$route.query.userName
            }).then(res => {
              self.mobinum = '';
              self.fullname = '';
              mintUi.openToast('邀请成功');
            });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  @import "../../assets/css/variable";

  .mobile-mem {
    .pt {
      padding-top: px2rem(156px);
    }
  }
</style>
